---
title: Stat
package: "@chakra-ui/stat"
image: "components/stat.svg"
description:
  As the name implies, the Stat component is used to display some statistics.
---

As the name implies, the `Stat` component is used to display some statistics.

<ComponentLinks
  theme={{ componentName: "stat" }}
  github={{ package: "stat" }}
  npm={{ package: "@chakra-ui/stat" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import {
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  StatGroup,
} from "@chakra-ui/react"
```

## Basic Usage

```jsx
<Stat>
  <StatLabel>Collected Fees</StatLabel>
  <StatNumber>£0.00</StatNumber>
  <StatHelpText>Feb 12 - Feb 28</StatHelpText>
</Stat>
```

### Stat with Indicator

```jsx
<StatGroup>
  <Stat>
    <StatLabel>Sent</StatLabel>
    <StatNumber>345,670</StatNumber>
    <StatHelpText>
      <StatArrow type="increase" />
      23.36%
    </StatHelpText>
  </Stat>

  <Stat>
    <StatLabel>Clicked</StatLabel>
    <StatNumber>45</StatNumber>
    <StatHelpText>
      <StatArrow type="decrease" />
      9.05%
    </StatHelpText>
  </Stat>
</StatGroup>
```

## Props

- `StatLabel`, `StatHelpText`, `StatNumber` composes
  [Text](/docs/typography/text) component.
- `StatArrow` composes [Icon](/docs/components/icon) component.
- `Stat` and `StatGroup` composes [Box](/docs/layout/box) component.

<PropsTable of="Stat" />
